import React, {Component} from 'react';
import {Tabs} from 'antd';
import TheTable from "../TheTable";
import ThePagination from "../ThePagination";
import PropTypes from "prop-types";
import TheServiceStationOrder from "../TheServiceStationOrder";
import './style/style.less'

const {TabPane} = Tabs;

class TheMerchantsOrder extends Component {
    state = {
        tableColumns: [
            {
                title: '订单编号',
                dataIndex: "orderCode",
                key: "orderCode",
            },
            {
                title: '订单类型',
                dataIndex: "volumeCodeType",
                key: "volumeCodeType",
                render: text => {
                    let label = ''
                    switch (text) {
                        case '2':
                            label = '消费代金券'
                            break;
                        case '3':
                            label = '商品兑换券'
                            break;
                        case '4':
                            label = '买单'
                            break;
                    }
                    return label
                }
            },
            {
                title: '商户名称',
                dataIndex: "orderTypeName",
                key: "orderTypeName",
                render: text => <div style={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    width: 150
                }}>{text}</div>,
                width: 150
            },
            {
                title: '优惠券名称',
                dataIndex: "productName",
                key: "productName",
                render: text => <div style={{
                    overflow: 'hidden',
                    whiteSpace: 'nowrap',
                    textOverflow: 'ellipsis',
                    width: 150
                }}>{text}</div>,
                width: 150
            },
            {
                title: '买家昵称',
                dataIndex: "wxNickName",
                key: "wxNickName",
                width: 140
            },
            {
                title: '买家手机号',
                dataIndex: "memberMobile",
                key: "memberMobile",
                width: 140
            },
            {
                title: '兑换所需嗨豆',
                dataIndex: 'orderTotalScore',
                key: 'orderTotalScore',
                render: text => <React.$price price={text} symbol={''}/>,
                width: 140
            },
            {
                title: '兑换数量',
                dataIndex: 'orderCount',
                key: 'orderCount',
                width: 140
            },
            {
                title: '服务费',
                dataIndex: 'orderTotalServer',
                key: 'orderTotalServer',
                render: text => <React.$price price={text || 0}/>,
                width: 140
            },
            {
                title: '实付金额',
                dataIndex: "orderPayPrice",
                key: "orderPayPrice",
                render: text => text && <React.$price price={text}/>,
                width: 140
            },
            {
                title: '订单时间',
                dataIndex: "createTime",
                key: "createTime"
            },
            {
                title: '过期时间',
                dataIndex: "validityEndDate",
                key: "validityEndDate",
                width: 140
            },
            {
                title: '使用状态',
                dataIndex: "volumeCodeState",
                key: "volumeCodeState",
                render: (text, record) => <span style={{
                    color: `${text === '1' ? '#fa5251' : '#05c160'}`
                }}>{text === '1' ? '未使用' : '使用'}</span>,
                width: 140
            },
            {
                title: '使用时间',
                dataIndex: "verificationTime",
                key: "verificationTime"
            },
        ],
        columns: [
            {
                title: '订单编号',
                dataIndex: 'orderCode',
                key: 'orderCode'
            },
            {
                title: '订单类型',
                dataIndex: "volumeCodeType",
                key: "volumeCodeType",
                render: text => {
                    let label = ''
                    switch (text) {
                        case '2':
                            label = '消费代金券'
                            break;
                        case '3':
                            label = '商品兑换券'
                            break;
                        case '4':
                            label = '买单'
                            break;
                    }
                    return label
                }
            },
            {
                title: '商户名称',
                dataIndex: 'orderTypeName',
                key: 'orderTypeName'
            },
            {
                title: '买家昵称',
                dataIndex: 'wxNickName',
                key: 'wxNickName'
            },
            {
                title: '买家手机号',
                dataIndex: 'memberMobile',
                key: 'memberMobile'
            },
            {
                title: '订单金额',
                dataIndex: 'orderTotalPrice',
                key: 'orderTotalPrice',
                render: text => <React.$price price={text}/>
            },
            {
                title: '优惠券抵扣',
                dataIndex: 'couponTotal',
                key: 'couponTotal',
                render: text => <React.$price price={text || 0}/>
            },
            {
                title: '实付金额',
                dataIndex: 'orderPayPrice',
                key: 'orderPayPrice',
                render: text => <React.$price price={text || 0}/>
            },
            {
                title: '订单时间',
                dataIndex: 'createTime',
                key: 'createTime'
            },
            {
                title: '状态',
                dataIndex: 'volumeCodeState',
                key: 'volumeCodeState',
                render: (text, record) => <span style={{
                    color: `${text === '1' ? '#fa5251' : '#05c160'}`
                }}>{text === '1' ? '未使用' : '使用'}</span>
            },
        ]
    }

    componentDidMount() {
        this.props.tabsChange('2')
    }

    render() {
        const {tableColumns, columns} = this.state
        const {loading, dataSource, pageNo, pageSize, total, tabPosition, pageChange, tabsChange} = this.props
        return <Tabs onChange={tabsChange} tabPosition={tabPosition}>
            <TabPane tab={'消费代金券'} key={'2'}>
                <div className={'p-layout-content-pagination'}>
                    <TheTable loading={loading} scroll={{x: 'max-content', y: 500}} dataSource={dataSource}
                              columns={tableColumns}/>
                    <ThePagination pageChange={pageChange} pageNo={pageNo} pageSize={pageSize} total={total}/>
                </div>
            </TabPane>
            <TabPane tab={'商品兑换券'} key={'3'}>
                <div className={'p-layout-content-pagination'}>
                    <TheTable loading={loading} scroll={{x: 'max-content', y: 500}} dataSource={dataSource}
                              columns={tableColumns}/>
                    <ThePagination pageChange={pageChange} pageNo={pageNo} pageSize={pageSize} total={total}/>
                </div>
            </TabPane>
            <TabPane tab={'买单'} key={'4'}>
                <div className={'p-layout-content-pagination'}>
                    <TheTable loading={loading} scroll={{x: 'max-content', y: 500}} dataSource={dataSource}
                              columns={columns}/>
                    <ThePagination pageChange={pageChange} pageNo={pageNo} pageSize={pageSize} total={total}/>
                </div>
            </TabPane>
        </Tabs>
    }
}

TheServiceStationOrder.propTypes = {
    pageNo: PropTypes.number,
    pageSize: PropTypes.number,
    total: PropTypes.number || PropTypes.string,
    loading: PropTypes.bool,
    dataSource: PropTypes.array || PropTypes.object,
    tabPosition: PropTypes.string
}
TheServiceStationOrder.defaultProps = {
    pageSize: 10,
    pageNo: 1,
    total: 1,
    loading: false,
    dataSource: [],
    tabPosition: 'top'
}

export default TheMerchantsOrder;